<template>
  <div>
    <el-tooltip :open-delay="1000" popper-class="tootipdiv"
                class="item"
                style="width:92%"
                :disabled="Array.isArray(rowData[scriptItem.valueFields])&&rowData[scriptItem.valueFields].length===0||!rowData[scriptItem.valueFields]"
                effect="dark"
                placement="top">
      <div class="tootipdv"
           slot="content"
           style="max-height:300px;overflow:auto"
           v-html="tootipHander(rowData[scriptItem.valueFields])"></div>
      <div style="float: left"
           :style="{ width: scriptItem.valueFieldsWidth }">
        <div v-if="filterType==='boolean' && !isConditionFormat"
             style="width: 100%;">
          <el-select v-model="rowData[scriptItem.valueFields]"
                     clearable
                     style="width: 100%"
                     :disabled="rowData.disabled||valueFieldDisabled(rowData[scriptItem.optionFields])">
            <el-option :label="'True'"
                       :value="true"></el-option>
            <el-option :label="'False'"
                       :value="false"></el-option>
          </el-select>
        </div>
        <div v-else-if="(filterType==='datetime'||filterType==='date') && !isConditionFormat && (rowData[scriptItem.optionFields] === 'between')"
             style="width: 100%;">
          <el-date-picker
            style="width:200px"
            size="small"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="rowData[scriptItem.valueFields]"
            type="datetimerange"
            :default-time="['00:00:00', '23:59:59']"
            range-separator="|"
            start-placeholder="start"
            end-placeholder="end">
          </el-date-picker>
        </div>
        <div v-else-if="(filterType==='datetime'||filterType==='date')"
             style="width: 100%;">
          <el-popover v-model="datetimeStatus"
                      ref="datetime-popover"
                      :disabled="valueFieldDisabled(rowData[scriptItem.optionFields])">
            <el-input style="width: 100%;"
                      slot="reference"
                      clearable
                      v-model="rowData[scriptItem.valueFields]"
                      :placeholder="scriptItem.valueHint"
                      :disabled="valueFieldDisabled(rowData[scriptItem.optionFields])"
                      readonly></el-input>
            <el-tabs v-if="optValue === 'timeofday'"
                     v-model='timeTabs'>
              <el-tab-pane label="Time"
                           name="Time">
                <el-time-picker is-range
                                v-model="timeOfDayValStart"
                                range-separator="-"
                                format="HH:mm"
                                value-format="HH:mm"
                                :start-placeholder="$t('statement.st')"
                                :end-placeholder="$t('statement.et')"
                                placeholder="">
                </el-time-picker>
              </el-tab-pane>
            </el-tabs>
            <el-tabs v-model='datetimeTabs'
                     v-else>
              <el-tab-pane label="Time Variate"
                           name="variate">
                <div style="display:flex;align-items:center;overflow:hidden;">
                  <el-cascader v-model="dateMoreList"
                               @change="selectDateMore"
                               filterable
                               clearable
                               :options="optValue==='=' ? datetimeVariateMoreTreeList : datetimeVariateMoreTreeListNormal"
                               :show-all-levels='false'
                               :props="{ expandTrigger: 'hover' }"
                               style="width: 30%;"
                               :style="{width:dateMore === 'current' ? '48.5%':'',marginRight:dateMore === 'current' ? '0':'10px'}"></el-cascader>
                  <template v-if="dateMoreList[0] === 'weeks'"></template>
                  <template v-else>
                    <el-input-number size="small"
                                     clearable
                                     :min="dateMore === 'current' ? 0:1"
                                     :max="10000"
                                     v-model="number"
                                     v-if="dateMore !== 'current'"
                                     controls-position="right"></el-input-number>
                    <el-select v-model="dateType"
                               filterable
                               clearable
                               default-first-option
                               style="margin-left:10px;"
                               :style="{width:dateMore === 'current' ? '48.5%':''}">
                      <el-option v-for="(item,i) in datetimeVariateType"
                                 :key="i"
                                 :label="item.dictLabel"
                                 :value="item.dictValue">
                      </el-option>
                    </el-select>
                    <el-date-picker v-if="dateType==='financialyear'"
                                    v-model="financialYearValue"
                                    type="date"
                                    size="small"
                                    format="MM-dd"
                                    value-format="MMdd"
                                    style="margin-left:10px;"
                                    popper-class="financialyeardatepicker"
                                    :placeholder="$t('placeholder.ps')">
                    </el-date-picker>
                    <el-time-picker v-if="dateType!=='minutes'&&dateType!=='hours'&&dateType!==''&&filterType==='datetime'&&!isConditionFormat"
                                    is-range
                                    v-model="currentSlectTime"
                                    format="HH:mm:ss"
                                    size="small"
                                    value-format="HH:mm:ss"
                                    range-separator="-"
                                    :start-placeholder="$t('statement.st')"
                                    style="margin-left:10px;"
                                    :end-placeholder="$t('statement.et')"
                                    :placeholder="$t('placeholder.ps')">
                    </el-time-picker>
                  </template>
                </div>
                <el-checkbox v-if="dateMore === 'last' || dateMore === 'next'"
                             v-model="isInclude"
                             true-label='includes'
                             false-label="unincludes"
                             style="margin-top:10px;"
                             size="mini">{{$t('attribute.include')}}
                  <span style="font-weight:bold;">{{ ` this ${dateTypeFormat(dateType)}` }}</span>
                </el-checkbox>
                <div style="margin-top: 10px" v-if="this.filterType==='date'">
                <span style="margin-right: 10px">{{$t('attribute.ApplytoTimezone')}}</span>
                <el-select v-model="dateSelected" placeholder="Apply to Timezone"  size="small">
                  <el-option
                     v-for="item in dateOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
                   </el-option>
                </el-select>
              </div>
              </el-tab-pane>
              <el-tab-pane label="Time"
                           v-if="optValue !== 'in'"
                           name="time">
                <el-date-picker v-model="datePickerValue"
                                :type="isConditionFormat?'date':'datetime'"
                                :value-format='isConditionFormat?"yyyy-MM-dd":"yyyy-MM-dd HH:mm:ss"'>
                </el-date-picker>
              </el-tab-pane>
            </el-tabs>           
            <el-row style="margin-top: 10px">
              <el-col :span="24"
                      style="text-align:right;">
                <el-button size="mini"
                           @click="clearDatetime">{{$t('attribute.clear')}}</el-button>
                <el-button type="primary"
                           size="mini"
                           @click="saveDatetime()">{{$t('attribute.save')}}</el-button>
              </el-col>
            </el-row>
          </el-popover>
        </div>
        <div v-else-if="(filterType==='text' || filterType==='user' || isConditionFormat)"
             style="width: 100%">
          <template v-if="valueIsOldData(rowData[scriptItem.valueFields])">
            <el-input type="text"
                      clearable
                      style="width: 100%"
                      v-model="rowData[scriptItem.valueFields]"
                      :disabled="rowData.disabled||valueFieldDisabled(rowData[scriptItem.optionFields])"></el-input>
          </template>
          <template v-else>
            <el-select v-model="rowData[scriptItem.valueFields]"
                       style="width: 100%"
                       :key='rowData[scriptItem.optionFields]'
                       :multiple="rowData[scriptItem.optionFields] === '= any'|| rowData[scriptItem.optionFields] === 'in' || rowData[scriptItem.optionFields] === 'not in'  || rowData[scriptItem.optionFields] === 'notIn'|| rowData[scriptItem.optionFields] === '= any in'|| rowData[scriptItem.optionFields] === '~*'|| rowData[scriptItem.optionFields] === '!~*'"
                       remote
                       clearable
                       :disabled="valueFieldDisabled(rowData[scriptItem.optionFields])"
                       reserve-keyword
                       :remote-method="remoteMethod"
                       @focus="setTempField(rowData[scriptItem.keyFields])"
                       @blur="clearTempField"
                       @visible-change="visibleChange"
                       size="small"
                       collapse-tags
                       filterable
                       @change="changeHan"
                       automatic-dropdown
                       allow-create>
              <el-option v-for="(fieldItem) in allValueList[rowData[scriptItem.keyFields]]"
                         :key="fieldItem"
                         :value="fieldItem+''">
                <EllipsisVessel placement="right"
                                :text="fieldItem+''" />

              </el-option>
            </el-select>
          </template>
        </div>
        <div v-else-if="filterType==='number' && !isConditionFormat"
             style="width: 100%;">
          <template v-if="valueIsOldData(rowData[scriptItem.valueFields])">
            <el-input style="width: 100%"
                      type="text"
                      clearable
                      v-model="rowData[scriptItem.valueFields]"
                      :disabled="rowData.disabled||valueFieldDisabled(rowData[scriptItem.optionFields])"></el-input>
          </template>
          <template v-else>
            <el-select v-model="rowData[scriptItem.valueFields]"
                       style="width: 100%"
                       :multiple="rowData[scriptItem.optionFields] === '= any' ||rowData[scriptItem.optionFields] === 'in' || rowData[scriptItem.optionFields] === 'not in'  || rowData[scriptItem.optionFields] === 'notIn'|| rowData[scriptItem.optionFields] === '~*'|| rowData[scriptItem.optionFields] === '!~*'"
                       remote
                       clearable
                       :disabled="valueFieldDisabled(rowData[scriptItem.optionFields])"
                       reserve-keyword
                       :remote-method="remoteMethod"
                       @focus="setTempField(rowData[scriptItem.keyFields])"
                       @blur="clearTempField"
                       @visible-change="visibleChange"
                       size="small"
                       collapse-tags
                       filterable
                       @change="checkboxGroupChange"
                       allow-create>
              <template v-if="rowData[scriptItem.optionFields] === 'in' || rowData[scriptItem.optionFields] === 'not in'">
                <div style="padding: 0 20px;height: 34px;line-height: 34px;">
                  <el-checkbox @change="selectAll($event)"
                               v-model="checked"
                               label="All"></el-checkbox>
                </div>
                <el-checkbox-group v-model="rowData[scriptItem.valueFields]"
                                   @change="checkboxGroupChange">
                  <el-option v-for="(fieldItem) in allValueList[rowData[scriptItem.keyFields]]"
                             :key="fieldItem"
                             :value="fieldItem+''">
                    <el-tooltip :open-delay="1000" :enterable="false"
                                class="item"
                                effect="dark"
                                :content="fieldItem+''"
                                placement="top-start">
                      <div class="more"
                           style="display:inline-block">{{ fieldItem+'' }}</div>
                    </el-tooltip>

                  </el-option>
                </el-checkbox-group>
              </template>
              <template v-else>
                <el-option v-for="(fieldItem) in allValueList[rowData[scriptItem.keyFields]]"
                           :key="fieldItem"
                           :value="fieldItem+''">
                  <EllipsisVessel placement="right"
                                  :text="fieldItem+''" />
                </el-option>
              </template>

            </el-select>
          </template>
        </div>
        <div v-else-if="filterType==='gadget_domain' && scriptItem.valueObject.options && !isConditionFormat"
             style="width: 100%;">
          <el-select v-model="rowData[scriptItem.valueFields]"
                     style="width: 100%"
                     filterable
                     clearable
                     allow-create
                     :disabled="valueFieldDisabled(rowData[scriptItem.optionFields])"
                     default-first-option
                     @change="selectChange()">
            <el-option v-for="(option,index) in scriptItem.valueObject.options"
                       :key="index"
                       :label="option.label"
                       :value="option.value">
              <EllipsisVessel :text="option.label"
                              placement="right" />

            </el-option>
          </el-select>
        </div>
        <div v-else-if="filterType==='create_date' && !isConditionFormat"
             style="width: 100%;">
          <el-date-picker v-model="rowData[scriptItem.valueFields]"
                          align="right"
                          type="date"
                          :disabled="valueFieldDisabled(rowData[scriptItem.optionFields])"
                          :placeholder="$t('placeholder.sd')"
                          :picker-options="pickerOptions">
          </el-date-picker>
        </div>
        <div v-else>
          <el-input :style="{ width: scriptItem.valueFieldsWidth }"
                    v-model="inputValue"
                    clearable
                    :placeholder="scriptItem.valueHint"
                    :disabled="rowData.disabled||valueFieldDisabled(rowData[scriptItem.optionFields])"></el-input>
        </div>
      </div>
    </el-tooltip>
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/script-type-view-module'
import { throttle } from 'lodash'
export default {
  mixins: [mixinTypeViewModule],

  props: {
    rowIndex: {
      type: String,
      default: null
    },
    filterType: {
      type: String,
      default: null
    },
    isConditionFormat: {
      type: Boolean,
      default: false
    },
    allValueList: {
      type: Object,
      default: () => { }
    },
    usefulness: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      autoTaskCheckGpModel: [],
      autoTaskChecked: false,
      checked: false,
      timeOfDayValStart: ['00:00', '23:59'],
      datetimeStatus: false,
      datetimeTabs: 'variate', // variate time
      timeTabs: 'Time',
      number: -1,
      isInclude: 'unincludes', // includes unincludes
      dateType: '',
      financialYearValue: '',
      currentSlectTime: null,
      dateMoreList: '',
      dateMore: '',
      datePickerValue: null,
      rowData: {},
      inputValue: '',
      thisIndex: -1,
      parentIndex: -1,
      indexStr: '',
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: 'Nowadays',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: 'Yesterday',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: 'A week ago',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      dateEquals: '',
      dateOptions: [{
          value: 'UTC',
          label: 'UTC'
        }, {
          value: 'Tenant Timezone',
          label: 'Tenant Timezone'
        }, {
          value: 'User Timezone',
          label: 'User Timezone'
        }],
      dateSelected:'UTC'  
    }
  },
  watch: {
    datetimeStatus: {
      handler: function (val) {
        if (val) {
          if ((this.rowData.value && this.rowData.value.search(/\{/) > -1) || this.optValue === 'in') {
            this.datetimeTabs = 'variate'
          } else {
            this.datetimeTabs = 'time'
          }
          document.addEventListener('mousedown', this.mouseDownListener)
        } else {
          document.removeEventListener('mousedown', this.mouseDownListener)
        }
      },
      immediate: true
    },
    rowIndex: {
      handler: function (newData) {
        this.indexStr = newData
        if (newData.indexOf('_') !== -1) {
          this.thisIndex = parseInt(newData.split('_')[0])
          this.parentIndex = parseInt(newData.split('_')[1])
        } else {
          this.thisIndex = parseInt(newData)
        }
      },
      deep: true,
      immediate: true
    },
    dataFormSub: {
      handler: function (val) {
        this.datePickerValue=null
        if (this.indexStr.indexOf('_') !== -1) {
          this.rowData = val[this.parentIndex][this.scriptItem.dataArr][this.thisIndex]
        } else {
          this.rowData = val[this.thisIndex]
        }
        if (this.rowData.opt === 'timeofday' && this.rowData.value) {
          this.timeOfDayValStart[0] = this.rowData.value.replace('{', '').replace('}', '').split('~')[0].substring(0, 5)
          this.timeOfDayValStart[1] = this.rowData.value.replace('{', '').replace('}', '').split('~')[1].substring(0, 5)
        }
        if (this.rowData.value) {
          let strValue = this.rowData.value
          if (typeof strValue === 'string' && strValue.search(/\{/) > -1 && strValue.search(/\}/) > -1) {
            let expression = strValue.slice(strValue.search(/\{/) + 1, strValue.search(/\}/))
            let tempList = expression.split(/\//)
            this.dateMore = tempList[0]
            if (tempList[0] === 'last' || tempList[0] === 'next' || tempList[0] === 'current' || tempList[0] === 'previous') {
              this.dateMoreList = [tempList[0]]
            } else {
              this.dateMoreList = ['weeks', tempList[0]]
            }
            this.number = isNaN(Number(tempList[1])) ? 1 : tempList[1]
            this.dateType = tempList[2].includes('financialyear') ? 'financialyear' : tempList[2]
            if (tempList[2].includes('financialyear')) {
              this.financialYearValue = tempList[2].split('-')[1]
            }
            this.dateEquals = tempList[0]
            tempList.length > 3 && (this.isInclude = tempList[3])
            this.datetimeTabs = 'variate'
            if (strValue.search(/time {/) > -1) {
              let temp = (strValue.split(' time {')[1]).replace('}', '')
              this.currentSlectTime = [temp.split('~')[0], temp.split('~')[1]]
            }
            if (tempList[tempList.length-1] === 'UTC' || tempList[tempList.length-1] === 'Tenant Timezone' || tempList[tempList.length-1] === 'User Timezone' ) {
              this.dateSelected = tempList[tempList.length-1]
            } else {
              this.dateSelected = 'UTC'
            }

          } else {
            this.datePickerValue = strValue
            this.datetimeTabs = 'time'
          }
        }
        this.$forceUpdate()
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    dataFormSub () {
      return this.dataForm[this.scriptItem.text][this.scriptItem.dataArr]
    },
    datetimeVariateMore () {
      let temp = []
      try {
        temp = window.SITE_CONFIG['dictList'].find(e => e.dictType === 'filter_variate_more').dataList
      } catch (error) { }
      return temp
    },
    datetimeVariateType () {
      let temp = []
      try {
        temp = window.SITE_CONFIG['dictList'].find(e => e.dictType === 'filter_variate_type').dataList
        if(this.isConditionFormat){
          temp=temp.filter(v=>!['Minutes','Hours','FinancialYear(QA)'].includes(v.dictLabel))
        }
      } catch (error) { }
      return temp
    },
    optValue () {
      try {
        return this.rowData[this.scriptItem.optionFields]
      } catch (error) {
        return ''
      }
    },
    dateWeekEquals () {
      let temp = []
      try {
        temp = window.SITE_CONFIG['dictList'].find(e => e.dictType === 'filter_week_of_day').dataList
      } catch (error) { }
      return temp
    },
    datetimeVariateMoreTreeList () {
      let temp = []
      try {
        this.datetimeVariateMore.map(e => {
          temp.push({
            label: e.dictLabel,
            value: e.dictValue
          })
        })
        let weeks = {
          label: 'Weeks',
          value: 'weeks',
          children: []
        }
        this.dateWeekEquals.map(e => {
          weeks.children.push({
            label: e.dictLabel,
            value: e.dictValue
          })
        })
        temp.push(weeks)
      } catch (error) { }
      return temp
    },
    datetimeVariateMoreTreeListNormal () {
      let temp = []
      try {
        this.datetimeVariateMore.map(e => {
          temp.push({
            label: e.dictLabel,
            value: e.dictValue
          })
        })
      } catch (error) { }
      return temp
    }
  },
  methods: {
    tootipHander (arr) {
      if (Array.isArray(arr)) {
        var str = ''
        arr.forEach(i => {
          str += i + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<br>'
        })
        return str
      } else {
        return arr
      }
    },
    selectAll (e) {
      if (e) this.rowData[this.scriptItem.valueFields] = this.allValueList[this.rowData[this.scriptItem.keyFields]]
      else this.rowData[this.scriptItem.valueFields] = []
    },
    checkboxGroupChange (val) {
      if (this.rowData[this.scriptItem.optionFields] === 'in' || this.rowData[this.scriptItem.optionFields] === 'not in') {
        if (val.length === this.allValueList[this.rowData[this.scriptItem.keyFields]].length) this.checked = true
        else this.checked = false
      }
    },
    valueFieldDisabled (optionFields) {
      let isDisabled = false
      switch (optionFields) {
        case 'is null':
          isDisabled = true
          break
        case 'is not null':
          isDisabled = true
          break
        case "!=''":
          isDisabled = true
          break
        case "=''":
          isDisabled = true
          break
      }
      return isDisabled
    },
    initAllSelect () {
      if (this.rowData[this.scriptItem.optionFields] === 'in' || this.rowData[this.scriptItem.optionFields] === 'not in') {
        if (this.rowData[this.scriptItem.valueFields].length === this.scriptItem.autoTaskStatuOptionList.length) {
          this.autoTaskChecked = true
          let arrLabel = []
          this.scriptItem.autoTaskStatuOptionList.forEach(element => {
            arrLabel.push(element.label)
          })
          this.autoTaskCheckGpModel = arrLabel
        } else {
          this.autoTaskChecked = false
          let arrLabel = []
          this.scriptItem.autoTaskStatuOptionList.forEach(element => {
            if (this.rowData[this.scriptItem.valueFields].includes(element.value)) arrLabel.push(element.label)
          })
          this.autoTaskCheckGpModel = arrLabel
        }
      }
    },
    selectDateMore (e) {
      this.dateMore = e[e.length - 1]
    },
    selectChange () {
      this.rowData['valueJson'] = this.rowData.toObject.options.find(item => {
        if (this.rowData[this.scriptItem.valueFields] === item.value) {
          return JSON.stringify(item)
        }
      })
    },
    saveDatetime () {
      if (this.dateType === 'financialyear') {
        if (!this.financialYearValue) {
          return this.$message.error('Please select date.')
        }
      }
      let temp = ''
      if (this.optValue === 'timeofday') {
        if (this.timeOfDayValStart) this.rowData.value = `{${this.timeOfDayValStart[0]}:00~${this.timeOfDayValStart[1]}:59}`
        this.datetimeStatus = false
        return false
      }
      if (this.datetimeTabs === 'variate') {
        if (this.dateMore === 'current') {
          if (!this.dateType) { return this.$message.error('Please select unit.') }
          this.number = 0
          if (this.dateType === 'financialyear') {
            temp = `{${this.dateMore}/${this.number}/${this.dateType}-${this.financialYearValue}/${this.filterType}}${this.currentSlectTimeValue()}`
          } else {
            temp = `{${this.dateMore}/${this.number}/${this.dateType}/${this.filterType}}${this.currentSlectTimeValue()}`
          }
        } else if (this.dateMore === 'previous') {
          if (!this.dateType) { return this.$message.error('Please select unit.') }
          if (this.dateType === 'financialyear') {
            temp = `{${this.dateMore}/${this.number}/${this.dateType}-${this.financialYearValue}/${this.filterType}}${this.currentSlectTimeValue()}`
          } else {
            temp = `{${this.dateMore}/${this.number}/${this.dateType}/${this.filterType}}${this.currentSlectTimeValue()}`
          }
        } else {
          if (this.dateMoreList[0] === 'weeks') {
            temp = `{${this.dateMore}/${this.filterType}}`
          } else {
            if (!this.dateType) { return this.$message.error('Please select unit.') }
            if (this.dateType === 'financialyear') {
              temp = `{${this.dateMore}/${this.number}/${this.dateType}-${this.financialYearValue}/${this.isInclude}/${this.filterType}}${this.currentSlectTimeValue()}`
            } else {
              temp = `{${this.dateMore}/${this.number}/${this.dateType}/${this.isInclude}/${this.filterType}}${this.currentSlectTimeValue()}`
            }
          }
        }
        if (this.dateSelected && this.filterType === 'date'&&this.usefulness&&this.usefulness==='dataSoureFilter') {
         temp = `{${temp.slice(1,-1)}/${this.dateSelected}}`
       }
      } else if (this.datetimeTabs === 'time') {
        temp = this.datePickerValue
      }
      this.rowData.value = temp
      this.datetimeStatus = false
    },
    currentSlectTimeValue () {
      let temp = ''
      if (this.currentSlectTime) {
        temp = ` time {${this.currentSlectTime[0]}~${this.currentSlectTime[1]}}`
      }
      return temp
    },
    clearDatetime () {
      this.rowData.value = ''
      this.dateEquals = ''
      this.timeOfDayValStart = null
      this.currentSlectTime = null
    },
    dateTypeFormat (dateType) {
      if (dateType) {
        let temp = []
        temp = window.SITE_CONFIG['dictList'].find(e => e.dictType === 'filter_variate_type').dataList
        return temp.find(e => e.dictValue === dateType).subjectCode
      }
      return ''
    },
    mouseDownListener (event) {
      if (!event.target.closest('.block-model-dialog')) {

      } else {
        this.datetimeStatus = false
      }
    },
    remoteMethod(e) {
      this.$emit('changeValue', e, localStorage.getItem('tempFilterValue'))
    },
    setTempField : throttle(function (field) {
      localStorage.setItem('tempFilterValue', field)
      //this.$emit('changeValue', null, localStorage.getItem('tempFilterValue'))
    },2000),
    visibleChange (e) {
      if (!e) {
        this.$emit('changeValue', null, localStorage.getItem('tempFilterValue'))
      }
    },
    clearTempField () {
      localStorage.removeItem('tempFilterValue')
    },
    valueIsOldData (value) {
      return Boolean(typeof value === 'string' && value.includes(','))
    },
    changeHan() {
      try {
          let regExp = /^[\*\+\?\[]/
          if(this.rowData.opt === '~*'||this.rowData.opt === '!~*') {
            this.rowData.value.forEach(item=>{
              if(regExp.test(item)) {
                return this.$message.error('Invalid input. Options cannot start with *, +, ?, or [. Please try again.')
              }
            })
          }
        } catch (error) {
          
        }
    }
  },
  mounted () {
    document.querySelector('.el-icon-')&&document.querySelector('.el-icon-').setAttribute('class', 'el-select__caret el-input__icon el-icon-arrow-up')
  }
}
</script>

<style scoped>
::v-deep .el-tabs__content {
  overflow: hidden !important;
}
::v-deep .el-select__tags-text {
  display: inline-block;
  max-width: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.more {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tootipdv::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  border-radius: 5px;
}
.tootipdv::-webkit-scrollbar-track {
  background: #303133;
  border-radius: 5px;
}
.tootipdv::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}
.tootipdv::-webkit-scrollbar-thumb:hover {
  background: #888;
  border-radius: 5px;
}
.tootipdv::-webkit-scrollbar-track-piece {
  background: #303133;
  border-radius: 5px;
}
</style>
<style>
.tootipdiv.el-tooltip__popper {
  padding-right: 0;
}
.financialyeardatepicker .el-date-picker__header span:nth-of-type(1) {
  display: none;
}
</style>
